<template>
	<view>
		<view class="rohead">
			<view class="creta">
				创建Xdidi账户
			</view>
			<view class="logins" @click="gogin">
				登录
			</view>
		</view>

		<view class="seins">
			<view class="centwe">
				<view class="urtems">
					<view class="shud">
						手机/邮箱
						{{containsAtSymbol}}--{{isFocused}}
					</view>
					<view class="conste">
						<!-- v-if="isAccountFouce " -->
						<view class="xijsd" :class="inputTelClass" style="position: relative;">

							<view class="sechs" v-if="ishowacc" @click="opencury">
								<image class="cury" src="/static/dazi/china.png" mode=""></image>
								<view class="senum">
									+86
								</view>
								<image class="botm" src="/static/dazi/Polygon 2.png" mode="widthFix"></image>
							</view>
							
							
							<input ref="emailInput" v-model="email" type="text" placeholder="请输入邮箱" @input="debouncedOnInput"
								@blur="handleBlur" @focus="handleFocus" />
	<!-- 					<div class="email-autocomplete">
							
							<input ref="emailInput" v-model="email" type="text" placeholder="请输入邮箱" @input="debouncedOnInput"
								@blur="handleBlur" @focus="handleFocus" />
							<ul v-show="showSuggestions" class="suggestions conjis">
								<li v-for="(domain, index) in filteredDomains" :key="index" @click.stop="selectDomain(domain)">
									{{ emailPart }}@{{ domain }}
								</li>
							</ul>
					
							<button type="reset">确认</button>
						</div> -->
							<image class="siecle" v-if="ishowacc" src="/static/dazi/cle.png" mode=""
								@click="email =''"></image>

							<view class="suggestions" v-if="showSuggestions">
								<view v-for="(domain, index) in emailDomains" :key="index" @mousedown.prevent="selectDomain(domain)"
									class="suggestion-item">
									{{ emailPart }}@{{ domain }}
								</view>
							</view>
						</view>

						<!-- 	<view class="" v-else>
							<view class="xijsd">
								<view class="incenm">
									<input type="text" placeholder="输入手机号或者邮箱.." v-model="account"
										placeholder-class="co" />
								</view>
								<image v-if="ishowacc" class="botm" src="/static/dazi/cle.png" mode=""
									@click="account =''"></image>


							</view>
							
							<view  class="suggestions">
								<view v-for="(domain, index) in suggestions" :key="index" @click="selectDomain2(domain)"
									class="suggestion-item">
									{{ emailPart }}@{{ domain }}
								</view>
							</view>
						</view> -->

					</view>
				</view>

				<view class="urtems">
					<view class="shud">
						设置密码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="填写密码" placeholder-class="co" />
							</view>
							<view class="">
								<image v-if="ispass" class="siecle" src="/static/dazi/ke.png" mode=""></image>
								<image v-else class="siecle" src="/static/dazi/nokan.png" mode=""></image>
							</view>

						</view>

					</view>
				</view>

				<view class="urtems">
					<view class="shud">
						确认密码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="再次填写密码" placeholder-class="co" />
							</view>
							<view class="">
								<image v-if="ispass2" class="siecle" src="/static/dazi/ke.png" mode=""></image>
								<image v-else class="siecle" src="/static/dazi/nokan.png" mode=""></image>
							</view>

						</view>

					</view>
				</view>





				<view class="urtems">
					<view class="shud">
						验证码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="请输入验证码" placeholder-class="co" />
							</view>
							<view class="send" @click="sencode">
								发送验证码
							</view>

						</view>

					</view>
				</view>

				<view class="urtems">
					<view class="shud">
						邀请码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="(选填)" placeholder-class="co" />
							</view>
							<view class="send">
								粘贴
							</view>

						</view>

					</view>
				</view>

				<view class="chebox">
					<view class="onpam">
						<view class="mans">
							<view class="leis " @click="changsezx(true)">
								<image class="selin"
									:src="  isman==true ? '/static/dazi/d0.png' :'/static/dazi/d1.png' " mode="">
								</image>
								<view class="mens " :class=" isman==true?'bgd':'' ">
									<image :src=" isman==true ? '/static/dazi/senan.png' : '/static/dazi/nona.png' "
										mode=""></image>
									<view class="tien" :class=" isman?'actit':'' ">
										我是男生
									</view>
								</view>
							</view>
							<view class="leis" @click="changsezx(false)">
								<image class="selin"
									:src="  isman==false ? '/static/dazi/d0.png' :'/static/dazi/d1.png' " mode="">
								</image>
								<view class="mens" :class=" isman==false?'bgd':'' ">
									<image :src=" isman==false ? '/static/dazi/senv.png' : '/static/dazi/ninv.png' "
										mode=""></image>
									<view class="tien " :class=" !isman?'actit':'' ">
										我是女生
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="busnd btnact">
					注册
				</view>
				<view class="seacus">
					<view class="isehd">
						<image @click="issele =!issele" v-if="issele" src="/static/dazi/okse.png" mode=""></image>
						<image @click="issele =!issele" v-else src="/static/dazi/nose.png" mode=""></image>
					</view>
					<view class="serins">
						<text>我已阅读并同意Xdidi</text>
						<text class="z1">《用户协议》</text>
						<text>和</text>
						<text class="z1">《隐私政策》</text>
					</view>



				</view>

			</view>
		</view>

		<up-overlay :show="show" @click="show = false"
			style="display: flex;align-items: center;justify-content: center;">
			<view class="pouper" @tap.stop>

				<view class="rosh">
					<image @click="show = false" src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="shudcode">
					请输入下方图形验证码
				</view>

				<view class="iosld">
					<input type="text" placeholder="请输入验证码" placeholder-class="co" />
					<view class="ksbq">
						<image src="/static/image/chat_system.png" mode=""></image>
						<view class="tsye">
							看不清?换一张
						</view>
					</view>
				</view>
				<view class="busnd btnact ash">
					确认
				</view>
			</view>
		</up-overlay>

		<!-- 国家选择 -->


		<!-- <u-popup :show="show2" @close="close2" @open="open2" :round="30"> -->
		<up-overlay :show="show2" @click="show2 = false"
			style="display: flex;align-items: flex-end;justify-content: flex-end;width: 750rpx;">
			<view class="sleguo" @tap.stop>
				<view class="ropwen">
					<view class="lesi">
						选择国家/地区代码
					</view>
					<image class="ediuyt" @click="show2=false " src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="serdh">
					<u--input placeholder="搜索" prefixIcon="search" v-model="query" @input="filterCountries"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
				<view class="sercha">
					<scroll-view scroll-y="true" style="height: 800rpx;">
						<view class="comyst">
							<view class="ontet" v-for="(item,index) in filteredItems" :key="index"
								:class="doubelslel ==index?'doubelslel':'' " @click="changecurry(item)">
								<view class="klia">
									<image :src=" item.country_image " mode=""></image>
									<view class="nals">
										{{item.en}}
									</view>
								</view>
								<view class="ados">
									+{{item.mobile_code}}
								</view>
							</view>

						</view>
					</scroll-view>

				</view>
			</view>
			<!-- </u-popup> -->
		</up-overlay>




		<button class="demo-btn" @tap="showSuccess">成功提示</button>
		<button class="demo-btn" @tap="showError">错误示例</button>
		<button class="demo-btn" @tap="showInfo">普通信息</button>

		<alert ref="globalAlert"></alert>

		<wloading v-show="active"></wloading>


	</view>
</template>

<script>
	// import alert from '@/components/alert/alert.vue';
	// import wloading from '@/components/loading20.vue'
	export default {
		data() {
			return {
				filteredItems: [{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					}
				], // 存储过滤后的结果
				currylist: [], //国家选择
				doubelslel: 0, //选择的国家
				imgcurry: {}, //默认嗯国家选择
				// isatinpu: false,
				// showSuggestions: false,
				// suggestions: [],
				// emailDomains: [
				// 	'qq.com',
				// 	'gmail.com',
				// 	'163.com',
				// 	'yahoo.com',
				// 	'hotmail.com',
				// 	'outlook.com',
				// 	// 更多...
				// ],
				// emailPart: '',


				email: '',
				showSuggestions: false,
				emailPart: '',
				isFocused: false, //是否聚焦
				emailDomains: [
					'qq.com', 'gmail.com', '163.com',
					'yahoo.com', 'hotmail.com', 'outlook.com'
				],
				debounceTimer: null,
				containsAtSymbol: false, //是否含有@ fasle没有，true 有



				isalert: false,
				show: false,
				show2: false,
				active: false, //加载动画
				account: '', //账号
				ishowacc: true, //当手机邮箱输出变成true
				ispass: false, //是否打来密码查看器
				ispass2: false, //再次填写密码是否打来密码查看器
				isman: true, //男女  true 男生  false 女生
				issele: false, //是否选择用户协议
				isAccountFouce: true, //手机邮箱是否聚焦

			}
		},
		computed: {
			inputTelClass() {
				return {
					'blon-border': this.isAccountFouce,
					'black-border': !this.isAccountFouce
				};
			},
			filteredDomains() {
				const value = this.email.trim();
				const atIndex = value.lastIndexOf('@');

				if (atIndex === -1) return [];

				const searchTerm = value.slice(atIndex + 1).toLowerCase();
				return this.emailDomains.filter(domain =>
					domain.startsWith(searchTerm)
				);
			}
		},
		mounted() {
			document.addEventListener('click', this.handleClickOutside);
		},
		beforeUnmount() {
			document.removeEventListener('click', this.handleClickOutside);
		},


		watch: {
			email(newval) {
				console.log('值', newval)
				const atinde = newval.lastIndexOf('@')
				console.log(atinde)
				if (atinde > 0) {
					this.containsAtSymbol = true
				} else {
					this.containsAtSymbol = false
				}
			}
		},

		methods: {
				// 点击外部区域关闭
						handleClickOutside(event) {
							
							const conjisEl = this.$el.querySelector('.conjis');
							
							if (conjisEl && !conjisEl.contains(event.target)) {
								// 点击发生在 conjis 容器之外，打印 111
								console.log('111');
							this.showSuggestions = false;
								this.isFocused = false;
							
							}
						
							// if (!this.$el.contains(event.target)) {
							// 		console.log('252252')
							// 	this.showSuggestions = false;
							// 	this.isFocused = false;
							// }
						},
			// 防抖处理（300ms）
			// 防抖函数修正
			debouncedOnInput(event) {
				console.log(event.detail.value)
				const rawValue = event.detail.value;
				clearTimeout(this.debounceTimer);
				this.debounceTimer = setTimeout(() => {
					this.processInput(rawValue); // 明确传参
				}, 300);
			},

			// 核心输入处理逻辑
			// 核心逻辑加固
			processInput(value) {
				// console.log(value)
				const safeValue = (value || '').trim(); // 双重保护

				const atIndex = safeValue.lastIndexOf('@');

				if (atIndex === -1) {
					this.showSuggestions = false;
					return;
				}

				this.emailPart = safeValue.slice(0, atIndex);
				this.showSuggestions = true;
			},
			// 选择域名并保持焦点
			selectDomain(domain) {
				this.email = `${this.emailPart}@${domain}`;
				this.showSuggestions = false;

				this.$nextTick(() => {
					this.$refs.emailInput.focus();
					//   // 移动光标到末尾
					//   const len = this.email.length;
					//   this.$refs.emailInput.setSelectionRange(len, len);
				});

				event.stopPropagation();
			},

			// 焦点管理
			handleFocus() {
				this.isFocused = true;
				this.processInput(this.email);
			},
			handleBlur() {
				setTimeout(() => {
					if (!this.isFocused) {
						this.showSuggestions = false;
					}
				}, 200);
			},


			opencury() {
				this.show2 = true
			},

			//选择的国家
			changecurry(item) {
				console.log(item)
				this.imgcurry = item
				this.show2 = false
				this.query = ''
			},


			gogin() {
				uni.navigateTo({
					url: '/pages/lug/loginreg/login'
				})
			},
			showSuccess() {
				this.$refs.globalAlert.show({
					type: 'success',
					title: '操作成功',
					content: '文件已上传至云端',
					duration: 2000
				})
			},
			showError() {
				this.$refs.globalAlert.show({
					type: 'error',
					title: '网络中断',
					content: '无法连接到服务器，请检查网络设置',
					duration: 4000
				})
			},
			showInfo() {
				this.$refs.globalAlert.show({
					type: 'info',
					title: '新消息提醒',
					content: '您有3条未读通知',
				})
			},
			sencode() {
				this.show = true
			},

			changsezx(i) {
				this.isman = i
			}

		},

	}
</script>

<style scoped>
	.email-autocomplete {
		position: relative;
		width: 300px;
	}

	input {
		width: 100%;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.suggestions {
		position: absolute;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		background: white;
		border: 1px solid #eee;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.suggestions li {
		padding: 8px;
		cursor: pointer;
	}

	.suggestions li:hover {
		background: #f5f5f5;
	}
</style>

<style lang="scss">
	.suggestions {
		position: absolute;
		width: 100%;
		height: 400rpx;
		top: 100rpx;
		left: 0;
		right: 0;
		z-index: 9999;
		list-style: none;
		background: white;
		border: 1px solid #eee;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.imghu {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}

	.acys {
		color: #0FA088 !important;
	}

	.ontet {
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ados {
		color: rgba(131, 116, 135, 1);
		font-size: 24rpx;
	}

	.klia {
		display: flex;
		align-items: center;

		image {
			margin-right: 30rpx;
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
			border-radius: 50rpx;
		}

		.nals {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}
	}

	.serdh {
		margin: 30rpx 0;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 30rpx;
		border: 1px solid #CFD6E3;
		display: flex;
		align-items: center;


	}

	.u-border {
		border-style: none !important;
	}

	.ropwen {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ediuyt {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
	}

	.lesi {
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-weight: bold;
	}

	.sleguo {
		padding: 30rpx;
		width: 750rpx;
		background-color: #fff;
		z-index: 9999999999;
		border-radius: 50rpx 50rpx 0 0;
	}


	.black-border {
		border: 1px solid #ede5ed;
	}

	.blon-border {
		border: 1px solid rgba(251, 117, 214, 1) !important;
		border-radius: 24rpx;
	}

	.u-transition {
		backdrop-filter: blur(3px);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) -30%, rgba(255, 255, 255, 0) 50%);

	}

	::deep .bgpup {
		background-color: #2A222F !important;
	}

	.co {
		font-size: 28rpx;
		color: rgba(195, 176, 195, 1);
	}

	.iosld {
		margin: 50rpx 0;
		display: flex;
		// align-items: center;
		justify-content: space-between;

		input {
			margin-right: 20rpx;
			padding: 0 20rpx;
			height: 100rpx;
			border: 1px solid rgba(237, 229, 237, 1);
			border-radius: 30rpx;

		}

		.ksbq {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			image {
				border: 1px solid #ccc;
				width: 240rpx;
				height: 100rpx;
			}

			.tsye {
				margin: 20rpx 0;
				color: rgba(251, 117, 214, 1);
				font-size: 24rpx;
			}
		}

	}

	.shudcode {
		color: 32rpx;
		font-size: 32rpx;
		text-align: center;
		color: #2A222F;
	}

	.pouper {
		background-color: #fff;
		width: 600rpx;

		padding: 30rpx;
		border-radius: 30rpx;
	}

	.rosh {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.isehd {
		height: 32rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.seacus {
		display: flex;
		align-items: center;
	}

	.z1 {
		color: rgba(251, 117, 214, 1) !important;
	}

	.serins {
		text {
			color: rgba(131, 116, 135, 1);
			font-size: 24rpx;
		}
	}

	.isehd {
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.btnact {
		background-color: #fb75d6 !important;
	}

	.ash {
		margin-top: 30rpx !important;
	}

	.busnd {
		margin: 100rpx 0 30rpx;
		background-color: rgba(255, 154, 233, 0.4);
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.bgd {
		background: rgba(88, 168, 255, 0.1);
		border: 1px solid rgba(88, 168, 255, 1) !important;

	}

	.actit {
		color: rgba(88, 168, 255, 1) !important;
		font-weight: 600;
	}

	.mans {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.leis {
		display: flex;
		align-items: center;

		.selin {
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
		}

		.mens {
			margin-left: 20rpx;
			border: 1px solid rgba(237, 229, 237, 1);
			width: 240rpx;
			height: 170rpx;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
			}
		}

		.tien {
			margin-top: 20rpx;
			color: rgba(131, 116, 135, 1);
			font-size: 28rpx;
		}
	}

	.send {
		color: rgba(251, 117, 214, 1);
		font-size: 28rpx;
	}

	.incenm {
		width: 60%;
		// background-color: #ccc;
	}

	.botm {
		width: 20rpx;
		height: 16rpx;
		vertical-align: middle;
	}

	.sechs {
		display: flex;
		align-items: center;



		.senum {
			padding: 0 6rpx;
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}

		.cury {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.xijsd {
		border: 1px solid rgba(237, 229, 237, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 30rpx;
		border-radius: 24rpx;
		position: relative;
	}

	.conste {
		margin: 30rpx 0;
	}

	.co {
		color: rgba(195, 176, 195, 1);
		font-size: 28rpx;
	}

	.siecle {
		width: 44rpx;
		height: 44rpx;
	}

	.urtems {
		.shud {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}

		.incenm {}
	}

	.rohead {
		z-index: 999;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.logins {
			color: rgba(251, 117, 214, 1);
			font-size: 32rpx;
		}

		.creta {
			color: rgba(42, 34, 47, 1);
			font-size: 48rpx;
		}
	}

	page {
		padding: 30rpx;
	}
</style>